<!--
* @Author: 张昊
* @Date:  2022-11-24 15:21:52
* @FilePath: /pages/mine/couponReceive/couponReceive.vue
* @Description: 领券中心
-->
<template>
	<view class="couponReceive">
		<view class="content" v-for="item in detailsItems" :key="item.id">
			<view class="left">
				<view class="money">
					{{ item.name }}
					<!-- <text class="small">{{ item.coupon.result === 1 ? '元' : '折' }}</text> -->
				</view>
				<view class="block">
					<!-- <view class="title">{{ item.name }}</view> -->
					<view class="texts">
						<view class="text">订单满{{ item.result_data.money }}元减{{ item.result_data.number }}元</view>
						<view class="text">发放总量:{{ item.give_num }}</view>
						<view class="text">领取有效时间:{{ item.receive_times }}</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="butoon">
					<u-button v-if="!item.is_received" @click="clickReceive(item)" type="primary" color="#0301c5" size="mini" text="立即领取"></u-button>
					<u-button v-else disabled type="error" color="#0301c5" size="mini" text="已领取" />
				</view>
			</view>
		</view>
		<!-- 下拉刷新组件 -->
		<txt-pulldown :flagIn="flag"></txt-pulldown>
	</view>
</template>

<script>
import {
	couponReceive, // 发放优惠券
	drawCoupon // 领取优惠券
} from '@/common/api.js';
import onReachBottom from '@/common/mixin/onReachBottom.js';
export default {
	mixins: [onReachBottom],
	data() {
		return {
			detailsItems: []
		};
	},
	methods: {
		// 点击购买
		async clickReceive(item) {
			let data = await drawCoupon({ id: item.id });
			console.log('data', data);
			this.detailsItems = [];
			this.num = 1;
			await this.reqPaging();
		},
		async reqPaging() {
			let { data, total } = await couponReceive({ params: { limit: 10, page: this.num } });
			this.total = total;
			this.detailsItems = [...this.detailsItems, ...data];
			console.log(this.detailsItems);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background-color: #ffffff;
	margin: 28rpx;
	display: flex;

	.left {
		flex: 1;
		border-right: 1px dashed #ddd;
		padding: 30rpx;
		display: flex;
		align-items: center;
		.money {
			margin-right: 28rpx;
			color: #e74c3c;
			.small {
				font-size: 15rpx;
			}
		}
		.title {
			font-size: 30rpx;
			font-weight: 600;
			margin: 8rpx 0;
		}
		.text {
			font-size: 24rpx;
			color: #9f9f9f;
		}
	}
	.right {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.butoon {
			width: 120rpx;
			height: 50rpx;
		}
	}
}
</style>
